<template>
  <div class="stock">
    <div class="stock-container"></div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, onUnmounted, Ref, ref } from 'vue';
import useEchartsData from '@/store/useEchartsData'
import * as echarts from 'echarts'
import { computed } from '@vue/reactivity';
import { storkList } from '@/types/storkType'
import throttleFn from '@/utils/throttle'


const store = useEchartsData()


//echarts实例
let mychart: any
//容器
let container: HTMLElement

//截取数据起始与结束索引
let star: number = 0
let end: number = 5

let timer: any


const stork = computed(() => {
  return store.storkList
})

let sliceStork: Ref<storkList[]> = ref([])


//初始化图表
const initChart = () => {
  mychart = echarts.init(container, 'dark-blue')
  let option = {
    title: {
      text: '▎库存和销量分析',
      left: 20,
      top: 20
    },
    tooltip: {
      trigger: 'item'
    },
  }

  mychart.setOption(option)
}

//更新图表数据
const updateOption = () => {
  const centerArr = [
    ['18%', '40%'],
    ['50%', '40%'],
    ['82%', '40%'],
    ['34%', '75%'],
    ['66%', '75%']
  ]
  const colorArr = [
    ['#4FF778', '#0BA82C'],
    ['#E5DD45', '#E8B11C'],
    ['#E8821C', '#E55445'],
    ['#5052EE', '#AB6EE5'],
    ['#23E5E5', '#2E72BF']
  ]
  let seriesArr = sliceStork.value.map((item, index) => {


    return {
      type: 'pie',
      radius: [110, 100],
      center: centerArr[index],
      name: item.name,
      data: [
        {
          value: item.sales,
          name: item.name,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: colorArr[index][0]
              },
              {
                offset: 1,
                color: colorArr[index][1]
              }
            ])
          }
        },
        {
          value: item.stock,
          itemStyle: {
            color: '#333843'
          }
        }
      ],

    }
  })
  let newOption = {
    series: seriesArr
  }

  mychart.setOption(newOption)
}

//动态更新数据
const Dynamic = () => {
  timer = setInterval(() => {
    star += 5
    end += 5
    if (end > 10 || star > 5) {
      end = 5
      star = 0
    }

    sliceStork.value = stork.value.slice(star, end)
    updateOption()
  }, 3000)
}

store.$subscribe((mutations, state) => {
  sliceStork.value = stork.value.slice(star, end)
})

//动态自适应
const resize = () => {
  return throttleFn(function () {
    let resizeOption = {
      title: {
        textStyle: {
          fontSize: container.offsetWidth / 100 * 2
        }
      }
    }
    mychart.setOption(resizeOption)
    mychart.resize()
  }, 100)
}

onMounted(async () => {
  try {
    await store.getStockData()
  } catch (error) {
    console.log(error);
  }

  container = document.querySelector('.stock-container') as HTMLElement

  initChart()
  updateOption()
  Dynamic()
  //宽度自适应
  window.addEventListener('resize', resize())
})

onUnmounted(() => {
  clearInterval(timer)
  window.removeEventListener('resize', resize)
})
</script>

<style lang="less" scoped>
.stock {
  width: 100%;
  height: 100%;

  .stock-container {
    width: 100%;
    height: 100%;
  }
}
</style>